<template>
  <div id='wrap'>
    <h1>绑定 HTML class</h1>
    <p class="p" :class="{active:isActive,'text-danger':hasError}" @click="changeClass">沁园春·雪</p>
    <p :class="classObj" @click="changeClass2">沁园春·雪</p>
    <p :class="classObjRef" @click="changeClass3">沁园春·雪</p>
    <hr>
    <p>
        <!-- <scus :class="classObj" @click="changeClass2" /> -->
        <scus :class="classObj" @click="changeClass2"></scus>
    </p>
    <hr>
    <p :class="[isActive ? activeClass2 : '',errorClass2,'active-new']" @click="changeClass4">沁园春·雪</p>
    <hr>
    <p :class="classObjComp">沁园春·雪</p>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu',
}
</script>

<script lang='ts' setup>
import { computed,reactive,ref } from 'vue'
import scus from "./20241216/scus.vue";
const isActive=ref(false)
const hasError=ref(false)
function changeClass() {
    isActive.value=!isActive.value
    hasError.value=!hasError.value
}
const classObj=reactive({
    active:true,
    'text-danger':true
})
function changeClass2(){
    classObj.active=!classObj.active
}
const classObjRef=ref({
    active:true,
    'text-danger':true
})
function changeClass3() {
    classObjRef.value['text-danger']=!classObjRef.value['text-danger']
}
const activeClass2=ref('active')
const errorClass2=ref('text-danger')
function changeClass4(){
    errorClass2.value='text-success'
}
const classObjComp=computed(()=>({
    active:true,
    'text-danger':true

}))
</script>

<style scoped lang='scss'>
.active {
  color: darkorange;
}

.text-danger {
  background-color: red;
}

.text-success {
  background-color: green;
}

.active-new {
  font-size: 22px;
}
</style>